<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="http://minedata.cn/minemapapi/v1.3/minemap.css">
    <script src="http://minedata.cn/minemapapi/v1.3/minemap.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>

<body>
<div id="map"></div>
</body>
<script>
    /**
     * 基本地图加载
     * 地图缩放级别限制
     */
    minemap.accessToken = '25cc55a69ea7422182d00d6b7c0ffa93';
    minemap.solution = 716;
    let map = new minemap.Map({
        container: 'map',
        style: "http://minedata.cn/service/solu/style/id/716",
        center: [116.46, 39.92],
        zoom: 10,
//        pitch: 60,
        maxZoom: 17,    //地图最大缩放级别限制
        minZoom: 9     //地图最小缩放级别限制
    });

    map.on('load', () => {

        const width = 64; // The image will be 64 pixels square
        const bytesPerPixel = 4; // Each pixel is represented by 4 bytes: red, green, blue, and alpha.
        const image = new Uint8Array(width * width * bytesPerPixel);

        for (var x = 0; x < width; x++) {
            for (var y = 0; y < width; y++) {
                const offset = (y * width + x) * bytesPerPixel;
                image[offset + 0] = y / width * 255; // red
                image[offset + 1] = x / width * 255; // green
                image[offset + 2] = 128;             // blue
                image[offset + 3] = 255;             // alpha
            }
        }

        map.addImage('gradient', image, {width: width, height: width});

        map.addLayer({
            "id": "points",
            "type": "symbol",
            "source": {
                "type": "geojson",
                "data": {
                    "type": "FeatureCollection",
                    "features": [{
                        "type": "Feature",
                        "geometry": {
                            "type": "Point",
                            "coordinates": [116.46, 39.92]
                        }
                    }]
                }
            },
            "layout": {
                "icon-image": "gradient"
            }
        });
    });

</script>

</html>